<template>
    <view>
        <view class="bg"></view>
        <view class="content">
            <view class="top">
                <view>累计金额</view>
                <view class="price">￥<text class="price-num">23290</text></view>
                <view class="btns">
                    <view class="btn-l" @click="$gTo(`/serve/pages/share/post`)">我的二维码</view>
                    <view class="btn-r" @click="$gTo(`/serve/pages/share/share-list`)">推荐列表</view>
                </view>
            </view>
            
            <view class="title">
                <image src="../../static/icon/money.png" class="money-icon"></image>
                <view>奖金明细</view>
            </view>
            
            <view class="info" v-for="(item, index) in 3" :key="index">
            	<view class="u-flex u-row-between u-p-b-25">
            		<view class="tit u-flex-1">推荐奖励</view>
            		<view class="date">2023.11.28 09:00</view>
            	</view>
            	<view class="u-flex u-col-bottom">
            		<view style="width: 360rpx;">
            			<view class="num1">23</view>
            			<view class="num1-tit">变更金额(元)</view>
            		</view>
            		<view class="u-flex-1">
            			<view class="num2">12</view>
            			<view class="num1-tit">剩余金额(元)</view>
            		</view>
            	</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        },
        onLoad() {
            
        },
        methods: {
            
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #f29700, #f5f5f5);
    }
    .content{
        padding: 20rpx;
    }
    .top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 60rpx 30rpx 35rpx;
        background: linear-gradient(180deg, #fff6e8, #fff);
        border: 4rpx solid #fff;
        border-radius: 15rpx;
        box-sizing: border-box;
    }
    .price{
        font-size: 33rpx;
    }
    .price-num{
        font-size: 64rpx;
    }
    .btns{
        padding-top: 60rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .btns>view{
        width: calc(610rpx / 2);
        height: 90rpx;
        font-size: 34rpx;
        line-height: 90rpx;
        text-align: center;
        border-radius: 15rpx;
    }
    .btn-l{
        color: #fff;
        background-color: #f29700;
        margin-right: 20rpx;
    }
    .btn-r{
        color: #f29700;
        background-color: #000;
    }
    
    .title{
        padding: 40rpx 0 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 30rpx;
        font-weight: bold;
    }
    .money-icon{
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
    }
    
    .info {
    	padding: 30rpx 20rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 20rpx;
        
        
    	.tit {
    		font-size: 30rpx;
    		line-height: 32rpx;
    		color: 444444;
    		font-weight: bold;
    	}
        
    	.date {
    		height: 33rpx;
    		font-size: 24rpx;
    		line-height: 33rpx;
    		color: #8c8c8c;
    		border-radius: 3rpx;
    		padding: 0 10rpx;
    		background-color: #f8f8f8;
    	}
        
    	.num1 {
    		font-size: 56rpx;
    		color: #f62a2a;
    	}
        
    	.num2 {
    		font-size: 40rpx;
    		color: #444444;
    	}
        
    	.num1-tit {
    		font-size: 24rpx;
    		color: #8f8f8f;
    	}
        
    	//无状态样式
    	.state {
    		width: 96rpx;
    		height: 40rpx;
    		font-size: 24rpx;
    		line-height: 40rpx;
    		text-align: center;
    		border-radius: 5rpx;
    	}
        
    	// 未审核样式
    	.state1 {
    		color: #ff9600;
    		background-color: #fff1de;
    	}
        
    	// 审核中样式
    	.state2 {
    		color: #f62a2a;
    		background-color: #ffe7e7;
    	}
        
    	// 已审核样式
    	.state3 {
    		color: #0042bc;
    		background-color: #e7f3ff;
    	}
    }
    
    
    

</style>
